<!--
 * @Author: your name
 * @Date: 2021-04-19 09:40:21
 * @LastEditTime: 2021-04-26 14:14:46
 * @LastEditors: Please set LastEditors
 * @Description: 导入部门人员组件
 * @FilePath: \html\src\views\department\importperson.vue
-->
<template>
  <div>
    <el-dialog
      title="导入人员"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-upload
        ref="upload"
        drag
        :data="parameter"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :action="uploadurl"
        :headers="uploadheaders"
        :file-list="fileList"
        :multiple="false"
        list-type="text"
        :limit="1"
        accept=".xls,.xlsx"
        :auto-upload="false"
        :http-request="httpRequest"
      >
        <div
          slot="trigger"
          style="width:100%"
        >
          <i class="el-icon-upload" />
          <div>将xls/xlsx类型文件拖到此处，或<em>点击上传</em></div>
        </div>
      </el-upload>
      <el-row style="margin-top:10px">
        <el-col :span="24">
          <el-button
            type="primary"
            size="mini"
            class="el-icon-plus"
            plain
            @click="handleChooseDepartment"
          >
            部门</el-button>
          <el-tag
            v-for="(tag,index) in departmentTags"
            :key="tag.Id"
            closable
            size="small"
            style="margin: 10px"
            @close="handleDepartmentClose(index)"
          >
            {{ tag.OrgName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px">
        <el-col :span="24">
          <el-button
            type="primary"
            size="mini"
            class="el-icon-download"
            plain
            @click="handleDownloadTemplate"
          >
            下载模板</el-button>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          @click="submitUpload"
        >确定</el-button>
      </span>
    </el-dialog>
    <SingleChoiceDepartment
      ref="singleDepartmnetRef"
      :echo-list="departmentTags"
      @submitSelect="handleDepartmentResult"
    />
  </div>
</template>
<script>
import axios from 'axios'
import { config } from '@/utils/requestconfig'
import { getToken } from '@/utils/auth' // 获取token
import SingleChoiceDepartment from '@/views/components/singlechoicedepartment'
export default {
  components: { SingleChoiceDepartment },
  props: {
    departmentObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      departmentTags: [],
      dialogVisible: false,
      fileList: [],
      uploadurl: config.webapi + 'Department/ImportPerson',
      uploadheaders: {
        Authorization: getToken(),
        ContentType: 'application/json'
      },
      uploaddata: { dir: 'uploadFile' },
      parameter: {},
      tagType: { success: 'success', warning: 'warning', danger: 'danger' } // tag显示类型
    }
  },
  watch: {
    departmentObj: {
      deep: true,
      handler(newV) {
        this.departmentTags = []
        this.departmentTags.push(newV)
        this.parameter = newV
      }
    }
  },
  methods: {
    // 下载模板
    handleDownloadTemplate() {
    },
    // 打开导入
    handleShow() {
      this.fileList = []
      this.dialogVisible = true
    },
    // 取消导入
    handleCancel() {
      this.dialogVisible = false
    },
    // 选择部门
    handleChooseDepartment() {
      this.$refs.singleDepartmnetRef.showSingleDepartmentDialog()
    },

    handleDepartmentClose(index) {
      this.departmentTags.splice(index, 1)
    },
    // 选择部门回调方法
    handleDepartmentResult(persontaglist) {
      this.departmentTags = persontaglist
    },
    submitUpload() {
      if (this.departmentTags.length <= 0) {
        this.$message({ type: 'error', message: '请选择需要导入的部门' })
        return
      }
      this.parameter = this.departmentTags[0]
      this.$refs.upload.submit()
    },

    httpRequest(param) {
      const fileObj = param.file // 相当于input里取得的files
      const fd = new FormData() // FormData 对象
      fd.append('file', fileObj) // 文件对象
      fd.append('Id', this.parameter.Id)
      fd.append('Name', this.parameter.OrgName)

      const url = config.webapi + 'Department/ImportPerson'
      const config1 = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: getToken()
        }
      }
      axios.post(url, fd, config1).then(res => {
        if (res.data.IsSuccess) {
          this.$message({
            type: 'success',
            message: res.data.Msg
          })
          this.dialogVisible = false
          this.$emit('saveSuccess')
        } else {
          this.$message({
            type: 'error',
            message: res.data.Msg
          })
        }
      })
    },

    // 上传失败返回
    uploadError(err) {
      this.$message({
        type: 'error',
        message: err
      })
    },
    // 上传文件成功返回
    uploadSuccess(respons) {
      if (respons.Code === 0) {
        this.$message({
          type: 'error',
          message: respons.Msg
        })
      } else {
        this.$message({
          type: 'success',
          message: respons.Msg
        })

        this.$refs.upload.clearFiles()
      }
    }
  }
}
</script>
<style lang="sass" scoped >
>>> .el-upload
  width: 100%

>>> .el-upload-dragger
  width: 100%
</style>
